<template>
  <div class="list-table">
    <div class=" area-header">
      <span class="area-header-title">{{ $t('角色管理') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('角色名称')" prop="roleName">
        <el-input
          v-model="queryParams.roleName"
          :placeholder="$t('角色名称')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('角色标识')" prop="roleKey">
        <el-input
          v-model="queryParams.roleKey"
          :placeholder="$t('角色标识')"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('创建时间')">
        <DatePicker
          v-model="dateRange"
          type="daterange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >{{ $t("新增") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:remove']"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >{{ $t('删除') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >{{ $t('导出') }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading || menuLoading" :data="roleList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column :label="$t('角色名称')" prop="roleName" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('角色标识')" prop="roleKey" :show-overflow-tooltip="true" />
      <el-table-column :label="$t('显示顺序')" prop="roleSort" align="center" width="150" />
      <el-table-column :label="$t('创建时间')" align="center" prop="createTime" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center" width="450" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:role:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >{{ $t('修改') }}</el-button>
          <el-button
            v-hasPermi="['system:role:edit']"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="handleDataScope(scope.row)"
          >{{ $t("数据权限") }}</el-button>
          <el-button
            v-hasPermi="['system:rolefolder:edit']"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="handleFolder(scope.row)"
          >{{ $t("文档库权限") }}</el-button>
          <!-- <el-button
            v-hasPermi="['system:role:edit']"
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="openDataForm(scope.row)"
          >权限</el-button> -->
          <el-button
            v-hasPermi="['system:role:allot']"
            size="mini"
            type="text"
            icon="el-icon-magic-stick"
            @click="handleUserScope(scope.row)"
          >{{ $t("分配") }}</el-button>
          <el-button
            v-hasPermi="['system:role:remove']"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="$t('角色')" :visible.sync="open" width="70%" custom-class="roleDialog" :close-on-click-modal="false" :lock-scroll="false" @close="closeDialog">
      <el-form ref="form" v-loading="loadingTree" :model="form" class="dataForm" :rules="rules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8" style="display: block;">
            <el-form-item :label="$t('角色名称')" prop="roleName">
              <el-input v-model="form.roleName" :placeholder="$t('角色名称')" maxlength="20" show-word-limit />
            </el-form-item>
            <el-form-item :label="$t('角色标识')" prop="roleKey">
              <el-input v-model="form.roleKey" :placeholder="$t('角色标识')" maxlength="20" show-word-limit />
            </el-form-item>
            <el-form-item :label="$t('角色顺序')" prop="roleSort">
              <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item :label="$t('备注')">
              <el-input v-model="form.remark" type="textarea" maxlength="200" show-word-limit="" :placeholder="$t('备注')" />
            </el-form-item>
          </el-col>
          <el-col :span="16" style="display: block;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :label="$t('电脑端菜单权限')" name="first">
                <div style="border: 1px solid #eee;padding: 10px;height: 100%;">
                  <Ztree menu="pc" :menu-options="pcOptions" :permissions-list="permissionsList" :check-nodes="checkNodes" @checkedDataPc="checkedPC" />
                </div>
              </el-tab-pane>
              <el-tab-pane :label="$t('移动端菜单权限')" name="second">
                <div style="border: 1px solid #eee;padding: 10px;height: 100%;">
                  <Ztree menu="mob" :menu-options="mobOptions" :check-nodes="checkNodes" @checkedDataMob="checkedMob" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t("取消") }}</el-button>
        <el-button :loading="loadingTree" type="primary" @click="submitForm">{{ $t("确定") }}</el-button>
      </div>
    </el-dialog>

    <!-- 分配角色数据权限对话框 -->
    <el-dialog v-if="openDataScope" :title="$t('数据权限')" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="openDataScope" custom-class="dialogForm">
      <el-container v-loading="dataScopeLoading" style="height: 100%;">
        <el-aside style="width: 30%;overflow: auto;border-right: 1px solid #e1e1e1;margin-bottom: 0;background: none;">
          <el-form :model="form">
            <el-form-item :label="$t('角色名称')">
              <el-input v-model="form.roleName" :disabled="true" />
            </el-form-item>
            <el-form-item :label="$t('角色标识')">
              <el-input v-model="form.roleKey" :disabled="true" />
            </el-form-item>
            <el-form-item :label="$t('默认范围')">
              <el-select v-model="form.dataScope" @change="dataScopeHanddle">
                <el-option
                  v-for="item in dataScopeOptions"
                  :key="item.value"
                  :label="$t(item.label)"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="form.dataScope === '2'" :label="$t('数据权限')">
              <div>
                <vue-easy-tree
                  ref="dept"
                  :data="deptOptions"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  height="300px"
                  :empty-text="$t('加载中，请稍后')"
                  :props="defaultProps"
                />
              </div>
            </el-form-item>
          </el-form>
        </el-aside>
        <div style="flex: 1;width: 100%;overflow: hidden;">
          <sysScopeAuthority ref="sysScopeAuthority" :bus-data="form" :data-scope-options="dataScopeOptions" :permissions-id="permissionsId" :parent-data-scope="form.dataScope" @submitCustom="submitCustom" />
        </div>
      </el-container>
      <div slot="footer" class="dialog-footer" style="margin-top: -65px;position: relative;">
        <div style="display: contents;border: 1px solid red;">
          <el-tooltip>
            <i class="el-icon-question" />
            <div slot="content">
              <p>{{ $t('单击:当前选项') }}</p>
              <p>{{ $t('双击:当前选项及所有子选项(自定义类型除外)') }}</p>
            </div>
          </el-tooltip>
        </div>
        <el-button @click="cancelDataScope">{{ $t("取消") }}</el-button>
        <el-button type="primary" @click="submitDataScope">{{ $t("确定") }}</el-button>
      </div>
    </el-dialog>

    <!-- 分配 -->
    <el-dialog :title="$t('用户角色')" :visible.sync="openUserScope" width="50%" :close-on-click-modal="false" :lock-scroll="false" append-to-body @close="cancelUserScope">
      <vueTransfer
        ref="transfer"
        v-model="toData"
        v-loading="userScopeLoading"
        :data="formData"
        filterable
        :titles="[$t('未选择用户'), $t('已选择用户')]"
        :filter-method="filterMethod"
        :filter-placeholder="$t('支持昵称、名称、部门搜索')"
        @change="changeUserScope"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUserScope">{{ $t("确定") }}</el-button>
        <el-button @click="cancelUserScope">{{ $t("取消") }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('文档库权限')" :visible.sync="openFolder" :close-on-click-modal="false" :destroy-on-close="true" custom-class="dialogForm">
      <folderRole ref="folderRole" />
    </el-dialog>

    <!-- 权限 -->
    <el-dialog :title="$t('数据权限')" :visible.sync="openData" :close-on-click-modal="false" custom-class="roleDialog" :lock-scroll="false" append-to-body>
      <dataScopePage />
    </el-dialog>

    <el-dialog :title="$t('导出')" :visible.sync="exportOpen" :close-on-click-modal="false" custom-class="dialogForm" :lock-scroll="false" append-to-body>
      <sysRoleExport ref="sysRoleExport" />
    </el-dialog>
  </div>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, saveUserRole, selectLastRole, findByRoleId } from '@/api/system/role'
import { treeselectAndPermission, roleMenuTreeselect } from '@/api/system/menu'
import { roleDeptTreeselect } from '@/api/system/dept'
import { allUser } from '@/api/system/user'
import folderRole from '@/views/folder/folderRole'
import dataScopePage from './dataScope.vue'
import Ztree from '@/components/Ztree/checkTree'
import sysScopeAuthority from '@/views/system/role/sysScopeAuthority.vue'
import sysRoleExport from '@/views/system/role/sysRoleExport.vue'
import VueEasyTree from '@wchbrad/vue-easy-tree'
import '@wchbrad/vue-easy-tree/src/assets/index.scss'
export default {
  name: 'Role',
  components: {
    sysRoleExport,
    dataScopePage,
    Ztree,
    folderRole,
    VueEasyTree,
    sysScopeAuthority
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      menuLoading: true,
      isUpdatePc: true,
      isUpdateMob: false,
      openData: false,
      loadingTree: false,
      activeName: 'second',
      roleId: '',
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 用户数组
      formData: [],
      toData: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      // 是否显示弹出层(分配用户角色)
      openUserScope: false,
      // 遮罩层(分配用户角色)
      userScopeLoading: false,
      // 文档库权限配置页面
      openFolder: false,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      // 菜单列表
      menuOptions: [],
      pcOptions: [],
      mobOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pcCheckedKeys: [],
      mobileCheckedKeys: [],
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ],
        roleKey: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ],
        roleSort: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ]
      },
      permissionsId: '',
      // 数据范围选项
      dataScopeOptions: [
        {
          value: '1',
          label: '全部数据权限'
        },
        {
          value: '2',
          label: '自定数据权限'
        },
        {
          value: '6',
          label: '本公司全部数据'
        },
        {
          value: '3',
          label: '本部门数据权限'
        },
        {
          value: '4',
          label: '本部门及以下数据权限'
        },
        {
          value: '5',
          label: '仅本人数据权限'
        }
      ],
      checkNodes: [],
      // 数据权限遮盖层
      dataScopeLoading: false,
      isShow: false,
      ztreeLoding: true,
      permissionsList: [],
      exportOpen: false
    }
  },
  created() {
    this.getList()
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
  },
  mounted() {
  },
  methods: {
    openDataForm() {
      this.openData = true
    },
    closeDialog() {
      localStorage.removeItem('pcIds')
      localStorage.removeItem('mobIds')
    },
    /** 查询角色列表 */
    getList() {
      this.closeDialog()
      this.loading = true
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.roleList = response.rows
          this.total = response.total
          this.loading = false
        }
      )
      treeselectAndPermission({ visible: '0' }).then(response => {
        this.pcOptions = response.data.computer
        this.permissionsList = []
        this.getAllNode(this.pcOptions)
        this.mobOptions = response.data.mobile
        this.menuLoading = false
      })
    },
    getAllNode(list) {
      for (let i = 0; i < list.length; i++) {
        var item = list[i]
        // console.log(item, item.label)
        this.$set(item, 'list', [])
        if (item.children) {
            var children = item.children.filter(v => v.type === 'menu')
            var lists = item.children.filter(v => v.type !== 'menu')
            this.permissionsList = this.permissionsList.concat(lists)
            // console.log(children, lists)
            this.$set(item, 'children', children)
            this.$set(item, 'list', lists)
          this.getAllNode(item.children)
        }
      }
      this.$forceUpdate()
    },
    /** 查询部门树结构 */
    getDeptTreeselect() {
      this.deptOptions = this.$store.state.user.deptOption
      // deptTreeselect().then(response => {
      //   this.deptOptions = response.data
      // })
    },
    checkedPC(val) { // pc选中节点集合
      this.pcCheckedKeys = val
    },
    checkedMob(val) { // 手机端选中节点集合
      this.mobileCheckedKeys = val
      // 由于页面加载时, PC和MOB的菜单ID一起查出来了, 这里在移动端勾选或取消时, 同步清理PC端数组中的ID
      this.pcCheckedKeys = JSON.parse(JSON.stringify(this.pcCheckedKeys.filter(item => !this.mobileCheckedKeys.includes(item))))
    },
    uniqueArr(array) {
      var n = []
      for (var i = 0; i < array.length; i++) {
        if (n.indexOf(array[i]) === -1) n.push(array[i])
      }
      return n
    },
    // 所有部门节点数据
    getDeptAllCheckedKeys() {
      // 目前被选中的部门节点
      const checkedKeys = this.$refs.dept.getHalfCheckedKeys()
      // 半选中的部门节点
      const halfCheckedKeys = this.$refs.dept.getCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },

    // 角色状态修改f
    handleStatusChange(row) {
      const text = row.status === '0' ? this.$t('启用') : this.$t('停用')
      this.$confirm(this.$t('确认要') + text + ' ' + row.roleName + '?', this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return changeRoleStatus(row.roleId, row.status)
      }).then(() => {
        this.msgSuccess(text + this.$t('成功'))
      }).catch(function() {
        row.status = row.status === '0' ? '1' : '0'
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
      this.closeDialog()
    },
    // 取消按钮（数据权限）
    cancelDataScope() {
      this.openDataScope = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.menuData = []
      this.form = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: '0',
        menuIds: [],
        deptIds: [],
        remark: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.checkNodes = []
      this.activeName = 'first'
      this.menuOptions = this.pcOptions
      this.isUpdatePc = true
      this.isUpdateMob = false
      setTimeout(() => {
        this.isShow = true
        this.ztreeLoding = false
      }, 500)
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.open = this.loadingTree = true
      this.pcCheckedKeys = []
      this.mobileCheckedKeys = []
      this.reset()
      this.activeName = 'first'
      const roleId = row.roleId || this.ids
      this.getRoleMenuTreeselect(roleId)
      getRole(roleId).then(response => {
        this.form = response.data
        this.form.menuIds = []
        this.loadingTree = false
        setTimeout(() => {
          this.isShow = true
          this.ztreeLoding = false
        }, 500)
      })
      this.isUpdatePc = true
      this.isUpdateMob = false
      this.menuOptions = this.pcOptions
    },
    handleClick(tab) {
      /** 查询Mobile菜单树结构 */
      if (tab.name === 'second') {
        this.menuOptions = this.mobOptions
      } else {
        this.menuOptions = this.pcOptions
      }
    },
    /** 查询pc菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      this.checkNodes = []
      roleMenuTreeselect(roleId).then(response => {
        this.checkNodes = response.data
      })
    },
    /** 分配数据权限操作 */
    handleDataScope(row) {
      this.permissionsId = row.roleId
      this.openDataScope = true
      this.reset()
      getRole(row.roleId).then(response => {
        this.form = response.data
        if (this.form.dataScope === '2') {
          this.getRoleDeptTreeselect(row.roleId)
        }
      })
    },
    /**
     * 跳转到文档库权限
     */
    handleFolder(row) {
      this.openFolder = true
      this.$nextTick(() => {
        this.$refs.folderRole.init(row)
      })
    },
    dataScopeHanddle(v) {
      if (v === '2') {
        this.getRoleDeptTreeselect(this.permissionsId)
      }
    },
    /** 根据角色ID查询部门树结构 */
    getRoleDeptTreeselect(roleId) {
      this.getDeptTreeselect()
      roleDeptTreeselect(roleId).then(response => {
        this.$nextTick(() => {
          if (this.openDataScope === true && this.$refs?.dept !== undefined) {
            this.$refs.dept.setCheckedKeys(response.data)
          }
        })
      })
    },
    // 分配用户角色操作
    handleUserScope(row) {
      this.userScopeLoading = true
      findByRoleId(row.id).then(response => {
        this.toData = response.data
      })
      allUser().then(response => {
        response.data.map((item) => {
          const data = {
            key: item.id,
            label: item.nickName + ' / ' + `${item.userName}` + ' / ' + `${item.dept.deptName}`,
            pinyin: item.userName,
            disabled: item.status === '1'
          }
          this.formData.push(data)
        })
        this.userScopeLoading = false
      })
      this.form.roleId = row.id
      this.openUserScope = true
    },
    // 分配用户角色 关闭按钮
    cancelUserScope() {
      this.openUserScope = false
      this.formData = []
      this.toData = []
      this.$refs.transfer.clearQuery('left')
      this.$refs.transfer.clearQuery('right')
    },
    // 分配用户搜索
    filterMethod(query, item) {
      return item.pinyin.indexOf(query) > -1 || item.label.indexOf(query) > -1
    },
    // 提交用户角色分配
    submitUserScope() {
      for (let i = 0; i < this.toData.length; i++) {
        this.toData[i] = { userId: this.toData[i], roleId: this.form.roleId }
      }
      const data = {
        sysUserRole: this.toData,
        roleId: this.form.roleId
      }
      saveUserRole(data).then(response => {
        if (response.code === 200) {
          this.msgSuccess(this.$t('保存成功'))
          this.formData = []
          this.toData = []
          this.openUserScope = false
          this.getList()
        } else {
          this.msgError(response.msg)
        }
      })
    },
    changeUserScope(value, direction, movedKeys) {
      if (direction === 'left') {
        selectLastRole(movedKeys).then(response => {
          var array = []
          response.data.map((item) => {
            this.toData.push(item)
            var filter = this.formData.filter(obj => obj.key === item)
            if (filter) {
              filter.forEach(i => {
                array.push(i.label)
              })
            }
          })
          if (response.data.length > 0) {
            this.msgError((this.isEmpty(array) ? '' : ('[' + array.join(', ') + ']')) + this.$t('用户只有一个角色,不能再取消分配!'))
          }
        })
      }
    },
    /** 提交按钮 */
    submitForm: function() {
      // this.activeName = 'second'
      // this.handleClick({ name: 'second' })
      this.loadingTree = true
      setTimeout(() => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            const allList = [...this.pcCheckedKeys, ...this.mobileCheckedKeys]
            this.form.menuIds = [...new Set(allList)]
            if (this.form.roleId !== undefined) {
              updateRole(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess(this.$t('修改成功'))
                  this.open = false
                  this.loadingTree = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                  this.loadingTree = false
                }
              }).catch(() => {
                this.loadingTree = false
              })
            } else {
              addRole(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess(this.$t('添加成功'))
                  this.open = false
                  this.loadingTree = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                  this.loadingTree = false
                }
              }).catch(() => {
                this.loadingTree = false
              })
            }
          } else {
            this.locationError(document)
            this.loadingTree = false
          }
        })
      }, 1000)
    },
    submitCustom(data) {
      if (this.form.menuScope === undefined || this.form.menuScope === null) {
        this.form.menuScope = []
      }
      const find = this.form.menuScope.findIndex(obj => obj.id === data[0].id)
      if (find && find > 0) {
        this.form.menuScope[find] = data[0]
      } else {
        this.form.menuScope.push(data[0])
      }
    },
    /** 提交按钮（数据权限） */
    submitDataScope: function() {
      if (this.form.roleId !== undefined) {
        this.form.deptIds = this.getDeptAllCheckedKeys()
        this.dataScopeLoading = true
        dataScope(this.form).then(response => {
          this.dataScopeLoading = false
          if (response.code === 200) {
            this.msgSuccess(this.$t('修改成功'))
            this.openDataScope = false
            this.getList()
          } else {
            this.msgError(response.msg)
          }
        }).catch(() => {
          this.dataScopeLoading = false
        })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.roleId || this.ids
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return delRole(roleIds)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {})
    },
    /** 导出按钮操作 */
    handleExport() {
      var textArr = []
      try {
        for (let i = 0; i < this.$refs['queryForm'].$el.length; i++) {
          if (this.$refs['queryForm'].$el[i].placeholder !== undefined) {
            var value = this.$refs['queryForm'].$el[i].value
            if (this.isEmpty(value)) {
              value = ''
            }
            textArr.push({ name: this.$refs['queryForm'].$el[i].placeholder, value: value })
          }
        }
      } catch (e) {
        console.log(e)
      }

      this.exportOpen = true
      this.$nextTick(() => {
        this.$refs.sysRoleExport.init(this.queryParams, textArr)
      })
    }
  }
}
</script>

